<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p10_固定定位遮掩层</title>
    <style>
        .mask{
            background-color: rgba(0,0,0,.5);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="mask"></div>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid, cum cupiditate, doloribus eligendi
            error eum exercitationem facilis fuga ipsa ipsum labore modi necessitatibus nesciunt officiis quaerat quidem
            repellendus rerum?
        </div>
        <div>Beatae dolores expedita fugiat itaque officia quos soluta veniam. Animi consequuntur dolor labore
            laboriosam quae. Aut dicta error explicabo fugit magni minima nihil officia quam, sapiente sint velit
            voluptas voluptatem?
        </div>
        <div>Error ex harum nulla sequi vitae? Consequuntur dicta dignissimos dolorem earum, error exercitationem
            laborum mollitia natus nesciunt porro qui rem, tempora, vero. Accusantium at fuga inventore suscipit.
            Architecto magni, officia!
        </div>
        <div>A, animi aspernatur, exercitationem expedita in, ipsa labore laboriosam modi molestias numquam obcaecati
            optio perferendis ratione! Aspernatur dicta eaque ex laudantium, minima optio quidem rem, saepe sit sunt
            tempora voluptates?
        </div>
        <div>Cum ex fuga impedit molestiae, neque perferendis perspiciatis quae. Aliquam aspernatur atque blanditiis cum
            dolorem doloremque ex inventore laudantium pariatur perspiciatis quaerat quidem repellat, repudiandae totam
            vero voluptates voluptatibus. Enim!
        </div>
        <div>Accusantium alias, beatae consequatur deserunt distinctio doloremque eaque est eveniet nam, nihil quas
            suscipit ut. Assumenda corporis illo ipsam nesciunt provident quibusdam reiciendis, soluta. Assumenda aut
            dolor laudantium nemo voluptatibus!
        </div>
        <div>Cupiditate deserunt enim facere laudantium libero non placeat provident. Ab accusantium ad aut consequuntur
            cumque debitis dolores ea error, et excepturi expedita id laborum nihil nisi nostrum odio temporibus, vitae?
        </div>
        <div>Ab animi aperiam architecto cupiditate distinctio doloremque doloribus eligendi exercitationem facere fuga
            ipsa libero maiores maxime molestiae mollitia, nulla placeat possimus quaerat qui, quia quis reiciendis sunt
            velit veritatis, voluptatum!
        </div>
        <div>Accusantium at autem blanditiis, error facere nesciunt nostrum officia repellat sapiente sed? Aliquid amet
            assumenda eveniet, explicabo incidunt ipsa laudantium magni nesciunt placeat quam quibusdam rem? Eos
            molestiae optio quaerat.
        </div>
        <div>Accusamus aliquam asperiores assumenda aut autem consectetur delectus eligendi esse facilis, illo in
            laborum nesciunt nostrum odio odit provident repellendus repudiandae sapiente soluta vero? Dolorum eaque
            eligendi et laudantium quo.
        </div>
        <div>A ad alias aliquid autem delectus deleniti dicta dignissimos eaque earum est expedita facilis ipsam ipsum
            laudantium minima nemo numquam, optio perspiciatis placeat quae quibusdam quo recusandae repellendus tenetur
            ut.
        </div>
        <div>Amet delectus, deserunt nam omnis provident quos tempora veritatis voluptas! Accusantium commodi culpa
            eligendi et itaque mollitia nihil quo rem sequi. Assumenda doloremque doloribus obcaecati possimus quae
            ratione repellat soluta!
        </div>
        <div>A ab ad adipisci amet at autem, consectetur consequuntur deserunt dolore dolorem earum exercitationem
            facere ipsum magni minima minus, nostrum nulla omnis possimus qui quo quod quos reiciendis reprehenderit
            voluptatibus.
        </div>
        <div>Alias beatae, blanditiis consectetur corporis cumque deleniti excepturi, incidunt magnam provident quasi
            qui reiciendis tenetur, vel? Eos esse eveniet, explicabo impedit sint tempora. Aspernatur assumenda,
            doloremque enim maiores molestiae voluptates?
        </div>
        <div>Ab est similique velit voluptatem. Aliquam consectetur consequatur corporis dignissimos dolorum eligendi
            eos esse eum illum ipsa, iste itaque magni maxime nemo nesciunt odio, omnis optio quia repellendus ullam?
            Beatae!
        </div>
        <div>Delectus enim iure natus placeat saepe! Earum nostrum rerum sunt tenetur voluptates! Aliquam, dolorem
            doloribus eaque earum eius est iure minima natus numquam officiis pariatur, qui recusandae reprehenderit sed
            voluptas!
        </div>
        <div>Architecto autem obcaecati pariatur ut voluptate. Harum iste mollitia officiis quam qui. Eaque eius maiores
            minima reprehenderit? Consequatur consequuntur dolore, error esse quia reprehenderit sapiente sint ullam vel
            vitae voluptatum?
        </div>
        <div>Accusamus animi, asperiores assumenda dicta ducimus eaque eius facere mollitia nobis non, officia omnis
            praesentium quia quidem sequi suscipit tempora? Ab ducimus facilis ipsam laudantium necessitatibus quibusdam
            rem reprehenderit vero!
        </div>
        <div>Accusamus, accusantium animi commodi consequatur enim excepturi fuga fugiat, iste itaque laboriosam magnam
            magni natus neque nisi quas quasi rem tempora totam voluptas, voluptatibus. Aut impedit iusto labore laborum
            quaerat.
        </div>
        <div>Ad aliquid aspernatur blanditiis cupiditate deserunt eos esse id, in laboriosam magnam maxime mollitia
            necessitatibus quas quo repellat repudiandae tempora tenetur unde vero voluptas. Hic necessitatibus odit
            repellat similique sint!
        </div>
        <div>At, atque consequatur cumque cupiditate distinctio doloremque doloribus eum fuga ipsa necessitatibus,
            numquam odit perferendis porro quam quis, quisquam reprehenderit veniam voluptatem! Alias assumenda est
            iusto nam suscipit tempora, voluptatibus?
        </div>
        <div>Alias amet, beatae consequuntur cupiditate delectus ea et exercitationem facere incidunt iure magni,
            molestias nemo quam quidem saepe tempora, velit. Aperiam cum deserunt dignissimos quasi qui saepe sint
            tenetur unde.
        </div>
        <div>Asperiores eveniet hic illum natus nemo nulla omnis tempora vel voluptate. A ab, dignissimos earum eligendi
            id in libero minus molestiae nam pariatur perferendis quam ut voluptatum. Assumenda, repudiandae tempora?
        </div>
        <div>Blanditiis distinctio excepturi expedita ipsa qui quo sed totam. A incidunt inventore iste reiciendis ut.
            Accusamus aperiam architecto at illum minima quis soluta suscipit! Asperiores beatae consequatur ex
            molestias odio?
        </div>
        <div>Deleniti earum et harum iure labore natus omnis quisquam sunt. Animi in ipsam odio qui quis, quos sapiente
            sed voluptatibus. Alias asperiores aut autem fugit harum nemo totam ullam vitae.
        </div>
        <div>Adipisci aliquid corporis, eaque eligendi esse ex fuga illo illum ipsam minus modi necessitatibus nemo
            nihil nisi nostrum, pariatur provident quasi quidem repellat, repudiandae saepe sapiente suscipit vel vitae
            voluptatibus?
        </div>
        <div>Atque dolorem ea error esse exercitationem harum illo laborum magnam maiores maxime minus molestiae
            necessitatibus non officia pariatur perferendis perspiciatis placeat possimus quaerat, quia quis quos
            reiciendis rem sunt tempore!
        </div>
        <div>Aliquid beatae deleniti dolores doloribus error fugiat placeat, provident, quos recusandae reiciendis,
            sequi similique suscipit voluptatem. Aspernatur dolores error esse expedita facilis fugit labore nemo
            reprehenderit rerum. Adipisci atque, soluta!
        </div>
        <div>Accusamus accusantium aliquam amet autem dolore error ex expedita explicabo fuga itaque, iusto laboriosam
            laudantium magni, maxime mollitia neque nesciunt nihil nisi perspiciatis porro quasi quibusdam
            reprehenderit, sapiente sed tenetur!
        </div>
        <div>Architecto deleniti dolore enim esse, illum in magni quae repellat sapiente tenetur ullam voluptatem?
            Adipisci autem, blanditiis delectus dolores est, eveniet hic illum officia officiis similique tempora
            tenetur, ullam voluptate.
        </div>
    </div>
</body>
</html>